﻿.example-content {
    gap: 0.5rem;
    display: flex;
    flex-flow: row wrap;
}

.form-container {
    max-width: 20rem;

    div {
        display: flex;
        justify-content: space-between;
    }
}

::deep {
    .custom-icon {
        color: hotpink;
    }

    .custom-content {
        position: relative;
    }

    .custom-content::after {
        content: '';
        left: 0;
        width: 0;
        height: 2px;
        bottom: -6px;
        position: absolute;
        transition: 0.3s ease;
        background: linear-gradient(90deg, #ff00cc, #3333ff);
    }

    .custom-root:hover .custom-content {
        color: blueviolet;
    }

    .custom-root:hover .custom-content::after {
        width: 100%;
    }
}
